<template>
  <view class="container">
    <head-box></head-box>
    <view class="ke-wrapper">
      <view class="online-wrap">
        <view class="title">
          <view class="p">线上课堂</view>
        </view>
        <view class="wrap1">
          <view
            class="left bg1"
            @tap="$api.handleMenu('/pages/classVideoListPage/classVideoListPage?state=0')"
          >
            <text class="b1">党群理论</text>
            <image class="im1" src="../../static/img/jy_ico6.png" mode="widthFix"></image>
          </view>
          <view class="right">
            <view
              class="li bg2"
              @tap="$api.handleMenu('/pages/classVideoListPage/classVideoListPage?state=1')"
            >
              <text class="b1">职业技能</text>
              <image class="im2" src="../../static/img/jy_ico7.png" mode="widthFix"></image>
            </view>
            <view
              class="li bg3"
              @tap="$api.handleMenu('/pages/classVideoListPage/classVideoListPage?state=4')"
            >
              <text class="b1">小视频</text>
              <image class="im3" src="../../static/img/jy_ico5.png" mode="widthFix"></image>
            </view>
            <view
              class="li bg4"
              @tap="$api.handleMenu('/pages/classVideoListPage/classVideoListPage?state=2')"
            >
              <text class="b1">生活服务</text>
              <image class="im4" src="../../static/img/jy_ico4.png" mode="widthFix"></image>
            </view>
            <view
              class="li bg5"
              @tap="$api.handleMenu('/pages/classVideoListPage/classVideoListPage?state=3')"
            >
              <text class="b1">急救培训</text>
              <image class="im5" src="../../static/img/jy_ico3.png" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="online-wrap" v-if="0">
        <view class="title" @tap="$api.handleMenu(`/pages/webview/webview?url=https://previewh5.hzzhdj.cn/taro/index.html#/pages/classes/list/index?classType=1`)">
          <view class="p">视频课程</view>
          <view class="more"
          >更多 <image src="/static/img/f08a46_11x21.png" mode="aspectFill"
          /></view>
        </view>
      </view>
      <view class="online-wrap" v-if="0">
        <view class="title" @tap="$api.handleMenu(`/pages/webview/webview?url=https://previewh5.hzzhdj.cn/taro/index.html#/pages/shareclass/shareclasslist/shareclasslist?classType=1`)">
          <view class="p">红色师资</view>
          <view class="more"
          >更多 <image src="/static/img/f08a46_11x21.png" mode="aspectFill"
          /></view>
        </view>
      </view>
      <!-- <view class="online-wrap" v-if="moveList.moveTitle != undefined">
        <view class="title">
          <view class="p">预约课程</view>
          <view class="more" @tap="onMainTitle"
            >更多 <image src="../../static/img/f08a46_11x21.png" mode="aspectFill"
          /></view>
        </view>
        <view class="course">
          <view
            class="course_item"
            @tap="$api.handleMenu('/pages/activityDetail/activityDetail?id=' + moveList.id)"
          >
            <view class="course_top">
              <view class="course_pic">
                <image :src="moveList.imageUrl" mode="aspectFill" />
              </view>
              <view class="course_text">
                <view class="box">
                  <view class="h4">{{ moveList.moveTitle }}</view>
                  <view class="p">报名截止 : {{ moveList.dateendTime }}</view>
                  <view class="p"
                    >预约人数 : {{ moveList.personNumber }}/{{ moveList.moveNum }}</view
                  >
                </view>
              </view>
            </view>
            <view class="yue"
              ><view class="time">活动时间：{{ moveList.endTime }}</view
              ><view class="btn_box">
                <view class="save-btn-text"><text>预 约</text></view></view
              ></view
            >
          </view>
          <view class="course_item  item-link"

          >
            <image  @click="onEncodeURIComponentUrl('1410818008200282113')" src="/static/training/5ea5571c48a68ee6bb9662025aae31d.png"></image>
          </view>
        </view>
      </view> -->

      <view class="online-wrap">
        <view class="title" @tap="$api.handleMenu('/pages/goodteachers/goodteachers')">
          <view class="p">群团师资</view>
          <view class="more"
            >更多 <image src="../../static/img/f08a46_11x21.png" mode="aspectFill"
          /></view>
        </view>
        <goodteachers :list="list" v-if="list.length"></goodteachers>
        <u-empty text="暂无师资榜列表数据" mode="list" v-else></u-empty>
      </view>
    </view>

    <view class="footer-null"> </view>

    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import { gpMoveList } from '@/api/move'
  import {gettRunResourcesBaseList} from '@/api/training'
  import goodteachers from '@/components/goodteachers'
  import{onMainTitle} from '@/common/type'
  import {agetGroupUrls} from '@/common/type'
  import {getGroupUrl } from '@/api/news'
  export default {
    components:{
      goodteachers
    },
    data() {
      return {
        moveList: {},
        pageSize: 5,
        pageNo: 1,
        list: [],
      }
    },
    onLoad() {
      this.GetMoveList()
      this.getTeacherList()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //跳外面 页面
      onEncodeURIComponentUrl(id){
        this.$clickGpScenePv('DKL')
        return agetGroupUrls(getGroupUrl,id)
      },
      //交友活动报名跳转
      onMainTitle(){
        this.$api.handleMenu(onMainTitle('15'))
      },
      //名师管理-分页列表查询
      async getTeacherList() {
        const params = { column: 'shareNum', order: 'desc',pageNo:this.pageNo,
          pageSize:this.pageSize,
          type:4,
          deleted:'0'
        }
        const {result:{records},code} = await gettRunResourcesBaseList (params)
       if(code===200){
         this.list = records
       }
      },
      GetMoveList() {
        var that = this
        const params = { moveType: 15,pageSize: 1,pageNo:1,flag:0 }
        gpMoveList(params).then((res) => {
          if (res.success) {
            that.moveList = []
            res.result.forEach((ele) => {
              var n = {
                id: ele.id,
                imageUrl: this.$api.getImgUrl(ele.movePic),
                moveTitle: ele.moveTitle,
                dateendTime: ele.dateendTime,
                personNumber: ele.personNumber,
                moveNum: ele.moveNum,
                endTime: ele.endTime,
              }
              that.moveList = n
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .save-btn-text {
    font-size: 24rpx;
    font-weight: 400;
    line-height: 1.42;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    padding: 10rpx 24rpx;
    cursor: pointer;
    -webkit-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    border-radius: 6rpx;
    border-top-left-radius: 6rpx;
    border-top-right-radius: 6rpx;
    border-bottom-right-radius: 6rpx;
    border-bottom-left-radius: 6rpx;
    background-clip: padding-box;
    color: #fff;
    border: 1px solid #dd524d;
    background-color: #dd524d;
  }
  .ico_dz {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
    vertical-align: middle;
    margin-bottom: 10rpx;
  }
  .container * {
    box-sizing: border-box;
  }
  .container {
    min-height: 100vh;
    background: #feffff;
  }
  .list-per {
    float: left;
    width: 100%;
    padding: 0 34rpx;
    border-top: 3rpx solid #e5eaf3;
  }
  .list-per .ul {
    float: left;
    width: 100%;
  }
  .list-per .ul .li {
    float: left;
    width: 100%;
    background: #fff;
    padding: 29rpx;
    box-shadow: 0 0 10rpx rgba(80, 104, 169, 0.11);
    margin-top: 24rpx;
  }
  .list-per .ul .li .pict {
    width: 183rpx;
    height: 236rpx;
    float: left;
    overflow: hidden;
    background: #e5e5e5;
  }
  .list-per .ul .li .pict image {
    width: 100%;
    min-height: 100%;
  }
  .list-per .ul .li .text {
    float: right;
    width: calc(100% - 183rpx);
    padding: 20rpx 0 0 60rpx;
  }
  .list-per .ul .li .text .p {
    display: block;
    line-height: 1.6;
    font-size: 30rpx;
    color: #431f09;
    overflow: hidden;
  }
  .footer-null {
    float: left;
    width: 100%;
    height: 143rpx;
  }
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: url()
      center top no-repeat;
    background-size: cover;
    height: 123rpx;
    display: flex;
    justify-content: space-between;
    padding-top: 18rpx;
  }
  .footer .icon-center {
    width: 101rpx;
    height: 102rpx;
    background: url()
      center top no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: -30rpx;
    margin-left: -10rpx;
  }
  .footer .li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 105rpx;
    width: 128rpx;
  }
  .footer .li .icon {
    width: 60rpx;
    height: 33rpx;
  }
  .footer .li .icon.icon1 {
    background: url()
      center/32rpx no-repeat;
  }
  .footer .li .icon.icon2 {
    background: url()
      center/30rpx no-repeat;
  }
  .footer .li .p {
    color: #0f59a4;
    font-size: 24rpx;
    display: block;
    margin-top: 10rpx;
  }
  .online-wrap {
    width: 100%;
  }
  .online-wrap .title {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10rpx;
  }
  .online-wrap .title .p {
    width: 70%;
    font-size: 32rpx;
    border-left: 6rpx solid #0071fc;
    padding-left: 10rpx;
  }

  .online-wrap .title .more {
    font-size: 24rpx;
    width: 30%;
    color: #999;
    text-align: right;
    padding: 5rpx 0;
    image {
      width: 13rpx;
      height: 24rpx;
      margin-left: 10rpx;
      padding-top: 2rpx;
    }
  }
  .online-wrap .wrap {
    float: left;
    width: 100%;
    padding: 28rpx;
    box-shadow: 0 0 10rpx rgba(80, 104, 169, 0.21);
    border-radius: 20rpx;
    margin: 20rpx 0;
  }
  .online-wrap .wrap .pict {
    float: left;
    width: 180rpx;
    height: 233rpx;
    overflow: hidden;
    border-radius: 10rpx;
  }
  .online-wrap .wrap .pict image {
    width: 100%;
    height: 100%;
  }
  .online-wrap .wrap .wrap-text {
    float: right;
    width: calc(100% - 180rpx);
    height: 233rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }
  .online-wrap .wrap .wrap-text .box {
    float: left;
    width: 100%;
    padding-left: 21rpx;
    padding-top: 9rpx;
  }

  .online-wrap .wrap .wrap-text .box_t {
    display: flex;
    flex-direction: row;
  }
  .online-wrap .wrap .wrap-text .h2 {
    display: block;
    font-size: 30rpx;
    color: #431f09;
    width: 65%;
  }
  .online-wrap .wrap .wrap-text .h3 {
    display: block;
    font-size: 26rpx;
    color: #bcbcbc;
    width: 35%;
    text-align: right;
    vertical-align: middle;
  }
  .online-wrap .wrap .wrap-text .h4 {
    display: block;
    font-size: 30rpx;
    color: #431f09;
  }
  .online-wrap .wrap .wrap-text .p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #888888;
  }
  .online-wrap .wrap .wrap-text .yue {
    width: 125rpx;
    height: 60rpx;
    text-align: right;
  }
  .ke-wrapper {
    float: left;
    width: 100%;
    padding: 30rpx 38rpx 0;
  }
  .ke-wrapper .wrap1 {
    float: left;
    width: 100%;
    margin: 20rpx 0;
  }
  .ke-wrapper .wrap1 .bg1 {
    background-color: #ff5757;
  }
  .ke-wrapper .wrap1 .bg2 {
    background-color: #f9ab60;
  }
  .ke-wrapper .wrap1 .bg3 {
    background-color: #4faffc;
  }
  .ke-wrapper .wrap1 .bg4 {
    background-color: #6a6ae4;
  }
  .ke-wrapper .wrap1 .bg5 {
    background-color: #f57768;
  }
  .ke-wrapper .wrap1 .b1 {
    float: left;
    color: #fff;
    font-size: 30rpx;
    margin-top: 25rpx;
    margin-left: 18rpx;
  }
  .ke-wrapper .wrap1 image {
    position: absolute;
    right: 5rpx;
    bottom: 5rpx;
    opacity: 0.6;
  }
  .ke-wrapper .wrap1 .im1 {
    width: 170rpx;
  }
  .ke-wrapper .wrap1 .im2 {
    width: 80rpx;
  }
  .ke-wrapper .wrap1 .im3 {
    width: 80rpx;
  }
  .ke-wrapper .wrap1 .im4 {
    width: 80rpx;
  }
  .ke-wrapper .wrap1 .im5 {
    width: 80rpx;
  }
  .ke-wrapper .wrap1 .left {
    width: 219rpx;
    height: 262rpx;
    position: relative;
    float: left;
    border-radius: 10rpx;
  }
  .ke-wrapper .wrap1 .right {
    width: calc(100% - 219rpx);
    float: right;
  }
  .ke-wrapper .wrap1 .right .li {
    position: relative;
    width: 219rpx;
    height: 129rpx;
    border-radius: 10rpx;
    float: left;
    margin-left: 10rpx;
  }
  .ke-wrapper .wrap1 .right .li:nth-child(n + 3) {
    margin-top: 7rpx;
  }

  .course_item {
    padding: 15rpx;
    box-shadow: 0 0 10rpx rgba(80, 104, 169, 0.21);
    border-radius: 20rpx;
    margin: 20rpx 0;
    .course_top {
      display: flex;
      flex-direction: row;
      .course_pic {
        width: 300rpx;
        height: 200rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .course_text {
        width: calc(100% - 300rpx);
        font-size: 30rpx;
        padding-left: 20rpx;
        .p {
          font-size: 24rpx;
          margin-top: 20rpx;
          color: #888888;
          line-height: 38rpx;
        }
      }
    }
    .yue {
      margin-top: 20rpx;
      display: flex;
      flex-direction: row;
      .time {
        width: 80%;
        font-size: 24rpx;
        color: #888888;
        padding: 11rpx 0;
      }
      .btn_box {
        width: 20%;
        text-align: right;
      }
    }
  }
  .item-link{
    image{
      width: 100%;
      height: 300rpx;
    }
  }
  .more{
    &:before{
      content: '';
    }
  }
</style>
